<!-- 负载率监视及预警 -->
<template>
  <div class="monitoringEndWarning">
    <!--  ========== (时间选择) ==========  -->
    <div class="operate card">
      <!-- <div>时间区间:</div> -->
      <div>
        <el-date-picker style="width:180px" v-model="s_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions"></el-date-picker>
      </div>
      <div class="hidden-xs-only">
        <i class="el-icon-minus"></i>
      </div>
      <div class="picker">
        <el-tooltip content="查询时间跨度最大为72小时" placement="top">、
          <el-date-picker style="width:180px" v-model="e_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions"></el-date-picker>
        </el-tooltip>
      </div>
      <div>
        <el-button type="primary" @click="t_button">查询</el-button>
      </div>
    </div>
    <!--  ========== (变压器负载率监视) ==========  -->
    <el-row class="card" :gutter="0" @click="off('tab')">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title="变压器负载率监视" />
        <tb v-loading="table_01_loading" tableTitle="tb_002" @tb_002_details="tb_002_details" :tableData="table_01_data" id="tab"></tb>
      </el-col>
    </el-row>
    <!--  ========== (回路负载率监视) ==========  -->
    <el-row class="card" :gutter="0" @click="off('tab')" v-loading="table_02_loading">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title="变压器负载率监视">
          <div style="border:none">
            <span style="font-size:14px">配电室选择：</span>
            <el-select @change="select_click(select_arr_value)" style="width:160px" v-model="select_arr_value" placeholder>
              <el-option v-for="item in select_arr" :key="item.name" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </Mtitle>
        <el-table empty-text=" " stripe :border="false" :data="table_02_data" style="width: 100%">
          <el-table-column label="配电室名称" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.roomName!==null?scope.row.roomName:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="仪表名称" align="center" width>
            <template slot-scope="scope">
              <span>{{scope.row.meterName!==null?scope.row.meterName:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="累积时长" align="center" width>
            <template slot-scope="scope">
              <span>{{scope.row.accumulateTime!==null?scope.row.accumulateTime:'-'}}min</span>
            </template>
          </el-table-column>
          <el-table-column label="A相" align="center">
            <el-table-column :render-header="(h)=>{return [h('span', {}, 'Ia最大负载率'), h('br', {}, ['']), h('span', {}, '')]}" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.loadRateMaxIa!==null?scope.row.loadRateMaxIa:'-'}}%</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="`${A_C === '01'?'Ta(℃)':'Ia(A)'}`">
              <template slot-scope="scope">
                <span>{{A_C === '01'?scope.row.ta:scope.row.ia !==null?A_C === '01'?scope.row.ta:scope.row.ia :'-'}}</span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="B相" align="center">
            <el-table-column :render-header="(h)=>{return [h('span', {}, 'Ib最大负载率'), h('br', {}, ['']), h('span', {}, '')]}" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.loadRateMaxIb!==null?scope.row.loadRateMaxIb:'-'}}%</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="`${A_C === '01'?'Tb(℃)':'Ib(A)'}`">
              <template slot-scope="scope">
                <span>{{A_C === '01'?scope.row.tb:scope.row.ib !==null?A_C === '01'?scope.row.tb:scope.row.ib :'-'}}</span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="C相" align="center">
            <el-table-column :render-header="(h)=>{return [h('span', {}, 'Ic最大负载率'), h('br', {}, ['']), h('span', {}, '')]}" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.loadRateMaxIc!==null?scope.row.loadRateMaxIc:'-'}}%</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="`${A_C === '01'?'Tc(℃)':'Ic(A)'}`">
              <template slot-scope="scope">
                <span>{{A_C === '01'?scope.row.tc:scope.row.ic !==null?A_C === '01'?scope.row.tc:scope.row.ic :'-'}}</span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column v-if="A_C === '01'" label="Tn(℃)" align="center" width>
            <template slot-scope="scope">
              <span>{{scope.row.tn!==null?scope.row.tn:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="scope">
              <!-- <span style="cursor:pointercolor:#0780ED" class='' @click='tb_003_details(scope.row,A_C)'>详情</span> -->
              <el-button @click="tb_003_details(scope.row,A_C)" type="success" size="mini">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--  ========== (变压器负载率监视详情弹出框) ==========  -->
    <el-dialog :title="`${dialog_01_time} - 负载率变化趋势`" :visible.sync="dialog_01" width="80vw" style="padding:20px">
      <el-row v-loading="ec_01_loading">
        <el-col>
          <ecline height="400px" :ecdata="ec_01_data" :visualMap="90" :linedata="line" unit="%"></ecline>
        </el-col>
      </el-row>
    </el-dialog>
    <!--  ========== (回路负载率监视 详情弹出框 ) ==========  -->
    <el-dialog :title="`${dialog_02_time} - 负载率及${A_C === '01'?'温度':'电流'}变化趋势`" :visible.sync="dialog_02" width="80vw">
      <el-row>
        <p>负载率变化趋势</p>
        <el-col>
          <!-- <ecline  height="250px" :ecdata='ec_01_data' :visualMap=90 :linedata="line" unit="%"></ecline> -->
          <div id="ec1" style="width:100%height:250px"></div>
        </el-col>
      </el-row>
      <el-row>
        <p style="margin-top:20px">{{A_C === '01'?'温度':'电流'}}变化趋势</p>
        <el-col>
          <!-- <ecline  height="250px" :ecdata='ec_01_data' :visualMap=90 :linedata="line" unit="%"></ecline> -->
          <div v-if="A_C === '01'" id="ec2" style="width:100%height:250px"></div>
          <div v-else id="ec3" style="width:100%height:250px"></div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts"
import e from '@/utils/echarts.js'
import day from "@/utils/day.js"
import Mtitle from '@/components/Mtitle'
import tb from '@/components/table'
import ecline from '@/components/echarts/ec_line'
export default {
  name: 'monitoringEndWarning',
  data() {
    return {
      color: ["#44D428", "#44D428", "#44D428", "#44D428"],
      line: [
        { yAxis: 90 }
      ],
      ajax_num: 1,
      ec_02_data: [],
      ec_03_data: [],
      ec_04_data: [],
      // ========== (变压器负载率table数据)) ==========
      table_01_data: [],
      // ========== (变压器负载率table数据) ==========
      table_01_loading: true,
      // ========== (负载率变化趋势详情) ==========
      dialog_01: false,
      // ========== (负载率变化趋势详情) ==========
      dialog_01_time: '',
      // ========== (负载率变化趋势详情) ==========
      ec_01_data: [],
      // ========== (负载率变化趋势详情) ==========
      ec_01_loading: true,
      // ========== (回路负载率监视) ==========
      table_02_data: [],
      // ========== (回路负载率监视) ==========
      A_C: '',
      // ========== (回路负载率监视) ==========
      dialog_02_time: '',
      // ========== (回路负载率监视) ==========
      electricityPolice: 0,
      // ========== (回路负载率监视) ==========
      dialog_02: false,
      // ========== (回路负载率监视) ==========
      table_02_loading: true,
      // ========== (回路负载率监视) ==========
      select_arr: [],
      // ========== (回路负载率监视) ==========
      select_arr_value: null,
      // ========== (初始化开始时间) ==========
      s_time: "",
      // ========== (初始化结束时间) ==========
      e_time: "",
      // ========== (初始日期格式) ==========
      v_type: "yyyy-MM-dd HH:mm",
      // ========== (初始日期显示类型) ==========
      d_type: "datetime",
      // ========== (时间选怎限制) ==========
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
    }
  },
  created() {
    // ========== (获取企业默认查询时间) ==========
    this.getTimeRange()
  },
  watch: {
    ajax_num(a, b) {
      if (a === 3) {
        this.initChart()
      }
    }
  },
  methods: {
    // ========== (initChart) ==========
    initChart() {
      let chart001 = echarts.init(document.getElementById('ec1'))
      chart001.setOption(e(this, 'ec_02_data', '%', 75))
      if (this.A_C === '01') {
        let chart002 = echarts.init(document.getElementById('ec2'))
        chart002.setOption(e(this, 'ec_03_data', '℃', this.electricityPolice))
        echarts.connect([chart001, chart002])
      }
      else {
        let chart003 = echarts.init(document.getElementById('ec3'))
        chart003.setOption(e(this, 'ec_04_data', 'A', this.electricityPolice))
        echarts.connect([chart001, chart003])
      }
    },
    // ========== (init) ==========
    initdata() {
      this.table_01_loading = true
      this.table_02_loading = true
      // 变压器负载率监视
      this.getLoadRateByTrans()
      // 回路负载率监视
      this.getLoadRateByLoop(0)
      // 查询配电室
      this.getRoomList()
    },
    // ========== (变压器负载率监视table) ==========
    getLoadRateByTrans() {
      this.$axios
        .post(this.Eelec + "/loadRateMonitor/getLoadRateByTrans", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time + ':00',
          endTime: this.e_time + ':00'
        })
        .then(res => {
          if (res.data.code === 200) {
            this.table_01_loading = false
            if (res.data.data) {
              this.table_01_data = res.data.data
            } else {
              this.table_01_data = []
            }
          } else {
            this.table_01_data = []
          }
        })
    },
    // ========== (变压器负载率监视点击详情) ==========
    tb_002_details(p) {
      this.ec_01_loading = true
      this.dialog_01 = true
      this.dialog_01_time = p.transName
      // 负载率变化趋势      
      this.getLoadRateTrendByTrans(p)
    },
    // ========== (负载率变化趋势详情) ==========
    getLoadRateTrendByTrans(p) {
      this.$axios
        .post(this.Eelec + "/loadRateMonitor/getLoadRateTrendByTrans", {
          // custId: sessionStorage.getItem("custId"),
          startTime: this.s_time + ':00',
          endTime: this.e_time + ':00',
          meterNo: p.meterNo,
          ratedCapacity: p.ratedCapacity,
          staId: p.staId,
        })
        .then(res => {
          this.ec_01_loading = false
          if (res.data.code === 200) {
            if (res.data.data) {

              this.ec_01_data = [{
                value: res.data.data,
                name: '负载率'
              }]
            }
            else {
              this.ec_01_data = []
            }
          }
        })
    },
    // ========== (回路负载率监视 table 数据) ==========
    getLoadRateByLoop(p) {
      this.$axios
        .post(this.Eelec + "/loadRateMonitor/getLoadRateByLoop", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time + ':00',
          endTime: this.e_time + ':00',
          roomId: p,
        })
        .then(res => {
          this.table_02_loading = false
          if (res.data.code === 200) {
            if (res.data.data.list) {
              this.table_02_data = res.data.data.list
              this.A_C = res.data.data.type
              // this.A_C = "01"              
            } else {
              this.table_02_data = []
            }
          } else {
            this.table_02_data = []
          }
        })
    },
    // ========== (回路负载率监视详情弹出框) ==========
    tb_003_details(p, t) {
      this.ajax_num = 1
      this.dialog_02_time = p.meterName
      this.dialog_02 = true
      this.electricityPolice = p.electricityPolice
      // 负载率变化趋势曲线(Ia,Ib,Ic)
      this.getLoadFactorCurve(p)
      if (t === '01') {
        // 温度变化趋势曲线(Ta,Tb,Tc,Tn)
        this.getTemperatureCurve(p)
      } else {
        // 电流变化趋势曲线(Ia,Ib,Ic)
        this.getCurrentCurve(p)
      }
    },
    // ========== (负载率变化趋势曲线(Ia,Ib,Ic)) ==========
    getLoadFactorCurve(p) {
      this.$axios
        .post(this.Eelec + "/loadRateMonitor/getLoadFactorCurve", {
          // custId: sessionStorage.getItem("custId"),
          startTime: this.s_time + ':00',
          endTime: this.e_time + ':00',
          meterNo: p.meterNo,
          ratedCapacity: p.ratedCurrent,
          staId: p.staId,
        })
        .then(res => {
          if (res.data.code === 200) {
            this.ajax_num += 1
            if (res.data.data) {
              this.ec_02_data = res.data.data
            }
            else {
              this.ec_02_data = []
            }
          } else {
            this.ec_02_data = []
          }
        })
    },
    // ========== (温度变化趋势曲线(Ta,Tb,Tc,Tn)) ==========
    getTemperatureCurve(p) {
      this.$axios
        .post(this.Eelec + "/loadRateMonitor/getTemperatureCurve", {
          // custId: sessionStorage.getItem("custId"),
          startTime: this.s_time + ':00',
          endTime: this.e_time + ':00',
          meterNo: p.meterNo,
          ratedCapacity: p.ratedCurrent,
          staId: p.staId,
        })
        .then(res => {
          if (res.data.code === 200) {
            this.ajax_num += 1
            if (res.data.data) {
              this.ec_03_data = res.data.data
            }
            else {
              this.ec_03_data = []
            }
          } else {
            this.ec_03_data = []
          }
        })
    },
    // ========== (电流变化趋势曲线(Ia,Ib,Ic)) ==========
    getCurrentCurve(p) {
      this.$axios
        .post(this.Eelec + "/loadRateMonitor/getCurrentCurve", {
          // custId: sessionStorage.getItem("custId"),
          startTime: this.s_time + ':00',
          endTime: this.e_time + ':00',
          meterNo: p.meterNo,
          ratedCapacity: p.ratedCurrent,
          staId: p.staId,
        })
        .then(res => {
          if (res.data.code === 200) {
            this.ajax_num += 1
            if (res.data.data) {
              this.ec_04_data = res.data.data

            }
            else {
              this.ec_04_data = []
            }
          } else {
            this.ec_04_data = []
          }
        })
    },
    // ========== (查询配电室) ==========
    getRoomList() {
      this.$axios
        .post(this.Eelec + "/loadRateMonitor/getRoomList", {
          custId: sessionStorage.getItem("custId"),
        })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data) {
              this.select_arr = res.data.data
              this.select_arr_value = res.data.data[0].id
            } else {
              this.select_arr = []
              this.select_arr_value = null
            }
          }
          else {
            this.select_arr = []
            this.select_arr_value = null
          }
        })
    },
    // ========== (配电室选择下拉框) ==========
    select_click(p) {
      this.table_02_loading = true
      this.getLoadRateByLoop(p)
    },
    // ========== (获取企业默认查询时间) ==========
    getTimeRange() {
      // this.show_Time = false
      this.$axios
        .post(this.Eelec + "/loadRateMonitor/getTimeRange", {
          custID: sessionStorage.getItem("custId")
        })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.endTime && res.data.data.startTime) {
              this.s_time = res.data.data.startTime
              this.e_time = res.data.data.endTime
              // this.show_Time = true
              this.initdata()
            }
          }
        })
    },
    // ========== (日期右侧查询) ==========
    t_button() {
      day.s_e(this.s_time, this.e_time, 'month72')
        .then(() => {
          this.initdata()
          // console.log("可以调方法了")
        })
        .catch(() => { })
    },
  },
  mounted() { },
  components: {
    tb,
    Mtitle,
    ecline
  },
}
</script>
<style lang='scss' scoped>
</style>